<template>
  <view class="body">
    <view
      class="slot-wrap"
      :style="{
        paddingTop: `${statusBarHeight1 + navbarHeight}px`,
        top: `-${statusBarHeight1 - 4}px`
      }"
    >
      <view class="des">广告</view>
      <view class="gb" @click="closeAd">
        <text v-if="playMinSeconds > 0">{{ playMinSeconds }}s</text>
        <text v-else>关闭</text>
        <u-icon style="margin-left: 8rpx" name="/static/gb.png" size="18"></u-icon>
      </view>
    </view>
    <view>
      <video
        id="video"
        :src="playUrl"
        :autoplay="true"
        :loop="true"
        :muted="false"
        @play="
          (res) => {
            playIngs(res)
          }
        "
        :enable-progress-gesture="false"
        :page-gesture="false"
        :controls="false"
        :show-loading="false"
        :show-fullscreen-btn="false"
        :http-cache="true"
        :object-fit="object_fit"
        :style="'width: ' + windowWidth + 'px; height: ' + boxStyle.height + 'px;'"
        @timeupdate="timeupdate($event)"
      ></video>
    </view>
    <u-popup mode="center" width="450rpx" border-radius="10" height="auto" v-model="closeAdModel">
      <view class="close-wapper">
        <view class="title">温馨提示</view>
        <view class="des"
          >继续观看<text style="font-size: 34rpx; margin: 0 10rpx">{{ playMinSeconds }}秒</text
          >即可解锁当前任务，是否确认退出？</view
        >
        <view class="bt-group dis-flex">
          <view class="bt" @click="jxLook">继续观看</view>
          <view class="bt bt-1" @click="cancelLook">放弃奖励退出</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  // components: {
  // 	myLoading
  // },
  data() {
    return {
      wHeight: 0, //获取的屏幕高度🌟💗
      windowWidth: 0,
      boxStyle: {
        //视频，图片封面样式🌟💗
        height: 0,
        width: 0
      },
      height: 0,
      object_fit: 'contain',
      background: {
        background: 'transparent'
      },
      playUrl: '',
      deleteHeight: 0,
      task: null,
      adver: null,
      ad: null,
      closeAdModel: false,
      limit: 0,
      statusBarHeight1: uni.getSystemInfoSync().statusBarHeight,
      playMinSeconds: 15,
      currentTime: 0
    }
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = uni.getSystemInfoSync().platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  onLoad(res) {
    uni.getSystemInfo({
      success: (e) => {
        this.platform = e.platform //获取操作系统
        if (e.model == 'iPhone12' || e.model == 'iPhone11' || e.model == 'iPhoneX') {
          // this.deleteHeight = 32//这里的数值只是做模拟，可自行更改
          this.deleteHeight = 0 //这里的数值只是做模拟，可自行更改
        }
      }
    })
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
    this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
    this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
    // this.wHeight = uni.getSystemInfoSync().screenHeight;//获取屏幕高度
    this.wHeight = uni.getSystemInfoSync().windowHeight //获取屏幕可用高度
    this.boxStyle.height = this.wHeight - this.deleteHeight //可以自行更改视频高度，想视频不那么高，就把0改大一点
    this.getData()
  },
  onReady() {},
  methods: {
    getData() {
      let self = this
      this.recPageNo += 1
      uni.$u.post('/app-api/member/cryptocurrency-increment/take').then((res) => {
        if (res.code === 0) {
          this.task = res.data.task
          this.adver = res.data.ad
          this.playUrl = res.data.ad.videoUrl
          this.playMinSeconds = res.data.playMinSeconds || 15
        } else {
          this.$u.toast(res.msg)
          setTimeout(function () {
            uni.navigateBack()
          }, 1200)
        }
      })
    },

    playIngs(res) {
      // this.$refs.video.stop();
    },
    stop() {
      this.$refs.video.stop()
    },

    timeupdate(currentTime) {
      this.currentTime++

      if (this.currentTime % 4 == 0) {
        this.playMinSeconds--
        if (this.playMinSeconds == 0) {
          this.sublimit()
        }
      }
    },

    sublimit() {
      uni.$u
        .post('/app-api/member/cryptocurrency-increment/submit', {
          increasingId: this.task?.id,
          advertisingId: this.adver?.id
        })
        .then((res) => {})
    },

    onUpdate() {},
    closeAd() {
      // uni.createVideoContext(this.dataList[this.k].vid, this).play();
      // this.$refs.video.pause();
      uni.createVideoContext('video', this).pause()
      if (this.playMinSeconds >= 0) {
        this.closeAdModel = true
      } else {
        uni.navigateBack()
      }
    },
    jxLook() {
      this.closeAdModel = false
      // this.$refs.video.play();
      uni.createVideoContext('video', this).play()
    },
    cancelLook() {
      uni.navigateBack()
    }
  }
}
</script>
<style lang="scss">
.body {
  flex: 1;
  background-color: #000000;
}

.slot-wrap {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
  width: 518rpx;

  .des {
    width: 96rpx;
    height: 42rpx;
    background: #eeeeef;
    border-radius: 21rpx;
    font-size: 24rpx;
    color: #ffffff;
    text-align: center;
    line-height: 42rpx;
  }

  .gb {
    width: 96rpx;
    height: 42rpx;
    background: #eeeeef;
    border-radius: 21rpx;
    font-size: 24rpx;
    color: #ffffff;
    text-align: center;
    line-height: 42rpx;
  }
}

.custom-lb-tabbar2 {
  width: 750rpx;
  height: 100rpx;
  box-shadow: 0px -1px 4rpx 0px rgba(153, 153, 153, 0.1);
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;
  z-index: 1000;
  position: fixed;
  bottom: 0px;
}

.custom-lb-tabbar-item2 {
  flex: 1;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.custom-lb-tabbar-icon2 {
  width: 24px;
  height: 24px;
}

.custom-lb-tabbar-mid2 {
  width: 64rpx;
  height: 64rpx;
}

.custom-lb-tabbar-title2 {
  font-size: 12px;
  color: #009a74;
  margin-top: 12rpx;
}

.custom-lb-tabbar-title3 {
  font-size: 12px;
  color: #949998;
  margin-top: 12rpx;
}

.swiper-body {
  flex: 1;
  /* #ifdef H5 */
  width: 100%;
  height: 100%;
  /* #endif */
}

.swiperItem {
  flex: 1;
  /* #ifdef H5 */
  width: 100%;
  height: 100%;
  /* #endif */
  display: flex;
  flex-direction: column;
}

.videoHover {
  position: absolute;
  top: 0;
  left: 0;
  flex: 1;
  background-color: rgba(0, 0, 0, 0.1);
  justify-content: center;
  align-items: center;
}
.close-wapper {
  text-align: center;
  padding: 0;
  .title {
    padding: 30rpx 20rpx;
    font-size: 32rpx;
    font-weight: 600;
  }
  .des {
    padding: 0 40rpx;
  }
  .bt-group {
    margin-top: 30rpx;
    border-top: 1rpx solid #efefef;

    .bt {
      flex: 1;
      padding: 30rpx 0;
      background-color: #009a74;
      color: #fff;
    }
    .bt-1 {
      // border-left: 1rpx solid #efefef;
      background-color: #e5e5e5;
      color: #333;
    }
  }
}
</style>
